<template>
  <div>
    <!-- 顶部 -->
    <div>
      <van-nav-bar
        title="我的"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
      </van-nav-bar>
    </div>
    <!-- 内容 -->
    <div class="contentBox">
      <ul class="contentList">
        <li @click="minePost">
          <span>我发表的</span>
          <span><van-icon name="arrow" /></span>
        </li>
        <li @click="mineComment">
          <span>我回复的</span>
          <span><van-icon name="arrow" /></span>
        </li>
        <li @click="mineCenter">
          <span>个人中心</span>
          <span><van-icon name="arrow" /></span>
        </li>
        <li>
          <span v-if="$store.state.isLogin" @click="login">登录/注册</span>
          <span v-else @click="logoutBtn">退出登录</span>
        </li>
        <li>
          <span></span>
        </li>
      </ul>
    </div>
    <indexFooter></indexFooter>
  </div>
</template>
<script>
import indexFooter from "../components/IndexFooter";
import { userInfo, logout } from "../api/api";

import { Toast } from "vant";
export default {
  name: "mine",
  components: {
    indexFooter,
  },
  data() {
    return {
      flag: false,

      // flag:false,
    };
  },
  created() {
    userInfo().then((res) => {
      console.log(res);
      if (res.code == 0) {
        console.log(343434);
        // this.flag=false;
        this.$store.commit("changeLogin", {
          isLogin: false,
          userInfo: res.data,
        });
      } else {
        // this.flag=true;
        this.$store.commit("changeLogin", { isLogin: true, userInfo: "" });
      }
    });
  },
  methods: {
    back() {
      this.$router.push("/index");
    },
    onClickLeft() {
      this.$router.back;

      window.history.go(-1);
    },
    onClickRight() {},
    // 退出登录
    logoutBtn() {
      logout().then((res) => {
        console.log(res);
        Toast("退出成功");
        // this.flag=true;
        // this.$router.push("/login")
        this.$store.commit("changeLogin", { isLogin: true, userInfo: "" });
      });
    },
    minePost() {
      userInfo().then((res) => {
        if (res.code == 0) {
          this.$router.push("/minePost");
        } else {
          Toast("您还没有登录");
        }
      });
    },
    mineComment() {
      userInfo().then((res) => {
        if (res.code == 0) {
          this.$router.push("/mineComment");
        } else {
          Toast("您还没有登录");
        }
      });
    },
    mineCenter() {
      userInfo().then((res) => {
        if (res.code == 0) {
          this.$router.push("/minePage");
        } else {
          Toast("您还没有登录");
        }
      });
    },
    login() {
      this.$router.push("/login");
      this.$store.commit("changeLogin", {
        isLogin: false,
        userInfo: userInfo.data,
      });
    },
  },
};
</script>
<style scoped lang="less">
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
/deep/.van-field__label {
  width: 3.2em;
}
// 内容
.contentBox {
  background-color: #f4f4f4;
}
.contentList > li {
  position: relative;
  clear: both;

  margin-bottom: 2px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding: 5% 5%;
  background-color: #fff;
}
.contentList > li {
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 16px;
  box-sizing: border-box;
  padding: 5% 5%;
}
.contentList > li:nth-of-type(4) {
  text-align: center;
}
.contentList > li:nth-of-type(4) > span {
  margin: auto;
  display: block;
}
.logout {
  margin: auto;
}
/deep/.van-button--info {
  background-color: #fff;
  border-color: red;
  color: red;
}
/deep/.van-button--info {
  color: black !important;
}
</style>